function $(el){
    return document.querySelector(el)
}
function gets(el){
    return [...document.querySelectorAll(el)]
}

let nav = $('.nav'),
    fixNav = $('.headerFixed'),
    content = $('.content'),
    fNav = $('.floorNav'),
    divs = gets('.content>div'),
    lis = [...fNav.children],
    curIdx;
window.addEventListener('scroll',function(){
    // 获取滚走的距离
    let scrTop = document.documentElement.scrollTop || document.body.scrollTop,
    // 获取nav距离顶部的距离
        top = nav.offsetTop,
        c_top = content.offsetTop - 200;
    fixNav.style.display = scrTop >= top ? 'block' : 'none';
    fNav.style.display = scrTop >= c_top ? 'block' : 'none';
    // 遍历content下所有的div
    divs.forEach((box,idx) => {
        //console.log('每一个div距离浏览器顶部的距离是：' + div.offsetTop);
        // 当scrTop
        if(box.offsetTop - 200 <= scrTop) curIdx = idx;
        showActive();
    })
});

lis.forEach((li,id) => {
    li.addEventListener('click',() => {
        curIdx = id;
        showActive();
        let pos = content.offsetTop;
        for(let i = 0; i < curIdx; i++){
            pos += divs[i].offsetHeight;
        }
        document.documentElement.scrollTop = pos;
        // 修改滚动条的位置 
    })
})

// 显示高亮
function showActive(){
    let cur = $('.active');
    cur && cur.classList.remove('active');
    lis[curIdx].classList.add('active');
}